<template>
    <div>
        <el-form-item label="文本名称">
            <el-input v-model="data.options.label"/>
        </el-form-item>
        <el-form-item label="选项">
            <el-radio-group v-model="data.options.remote" size="mini" style="margin-bottom:10px;">
                <el-radio-button :label="false">静态数据</el-radio-button>
                <el-radio-button :label="true">远端数据</el-radio-button>
            </el-radio-group>
            <div v-if="data.options.remote">
                <el-input size="mini" style="" v-model="data.options.remoteFunc">
                    <template slot="prepend">远端方法</template>
                </el-input>
                <el-input size="mini" style="" v-model="data.options.props.value">
                    <template slot="prepend">值</template>
                </el-input>
                <el-input size="mini" style="" v-model="data.options.props.label">
                    <template slot="prepend">标签</template>
                </el-input>
            </div>
            <div v-else>
                <el-checkbox-group v-model="data.options.defaultValue">
                    <draggable
                        tag="ul"
                        :list="data.options.options"
                        v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
                        handle=".drag-item"
                    >
                        <li v-for="(item, index) in data.options.options" :key="index" >
                            <el-checkbox
                                :label="item.value"
                                style="margin-right: 5px;"
                            >
                                <el-input :style="{'width': data.options.showLabel? '90px': '190px' }" size="mini" v-model="item.value"/>
                                <el-input style="width:90px;" size="mini" v-if="data.options.showLabel" v-model="item.label"/>
                            </el-checkbox>
                            <i class="drag-item"><i class="iconfont2 icon-icon_bars"/></i>
                            <el-button @click="handleOptionsRemove(index)" circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;"/>

                        </li>
                    </draggable>

                </el-checkbox-group>
            </div>
            <div>
                <el-button type="text" @click="handleAddOption">添加选项</el-button>
            </div>
        </el-form-item>
    </div>
</template>
<script>
import Draggable from 'vuedraggable'
export default {
    name: 'BaseRadio',
    components: {
        Draggable
    },
    props: {
        data: {
            type: Object
        }
    },
    methods: {
        handleOptionsRemove(index) {
            this.data.options.options.splice(index, 1)
        },
        handleAddOption() {
            this.data.options.options.push({
                value: '新选项',
                label: '新选项'
            })
        }
    }
}
</script>
